﻿<link href="~/Content/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" />
<script src="~/Scripts/fileinput.min.js"></script>
<script src="~/Scripts/locales/zh.js"></script>


<div class="col-lg-12">
    <div class="space-20 hidden-md hidden-lg"></div>
    <div class="space-4 hidden-sm hidden-xs"></div>
    <select id="type" name="">
        <option selected="" value="-1">全部</option>
        <option value="0">零食&饮料</option>
        <option value="1">电子&数码</option>
        <option value="2">厨卫&家居</option>
        <option value="3">水果&干果</option>
        <option value="4">其他</option>
    </select>
    <a onclick="Search(1)" href="javascript:void(0)" class="easyui-linkbutton" title="筛选" data-options="iconCls:'icon-search',plain:true,iconAlign:'right'"><input class="input-small" type="text" name="" id="selecttext" value="" placeholder="请输入查询条件" style="vertical-align:middle;line-height:normal;" onclick="searchinput(this)" /></a>
    <div class="space-2"></div>
</div>
<div class="page-content">

    <table id="dg" class="easyui-datagrid " title="管理员用户管理" style="width:100%;height:800px"></table>
    <script type="text/javascript">

        $(function () {
            $(".nav-list li").eq(1).addClass("active");
            $('#dg').datagrid({
                autoRowHeight: true,

                checkOnSelect: false,
                url: '/Home/AllGoods',
                pagination: true,
                pageSize: 10,
                method: 'get',
                striped: true,

                singleSelect: true,
                toolbar: toolbar,
                selectOnCheck: false,
                fitColumns: true,
                loadMsg: "loading...",
                columns: [[
                    {
                        field: 'ck',
                        title: "",
                        checkbox: true
                    },
                    {
                        field: 'actt',
                        title: '操作',
                        width: 80,
                        formatter: function (value, row, index) {
                            var _btn = '<button class="btn btn-success btn-xs" style="margin:3px;" onclick="inStore(' + index + ',event)">入库</button>' +
                                '<button class="btn btn-inverse btn-xs" style="margin:3px;" onclick="editline(' + index + ',event)">编辑</button>' +
                                '<button class="btn btn-danger btn-xs" style="margin:3px;" onclick="deleteline(' + row.G_ID + ',event)">删除</button>'
                            return _btn;
                        }
                    },
                    {
                        field: 'Type', title: '商品类型', width: 30,
                        formatter: function (value, row, index) {

                            switch (row.Type) {

                                case 0: return "零食&饮料";
                                case 1: return "电子&数码";
                                case 2: return "厨卫&家居";
                                case 3: return "水果&干果";
                                default: return "其他";
                            }
                        }
                    },
                    { field: 'Name', title: '商品名称', width: 30 },
                    { field: 'Detail', title: '详情', width: 80 },
                    { field: 'Price', title: '单价', width: 20 },
                    { field: 'Stock', title: '库存', width: 40 },
                    { field: 'Remark', title: '备注', width: 60 },
                    {
                        field: 'Img', title: '展示图片', width: 60,
                        formatter: function (value, row, index) {

                            var _img = "<img  style='width:100%;height:100%' src='" + row.Img + "' onmouseover='sss(this)'/>"
                            return _img;
                        }
                    },
                ]],
                onHeaderContextMenu: function (e, field) {
                    e.preventDefault();

                    if (!cmenu) {
                        createColumnMenu();
                    }
                    cmenu.menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                }
            });
        });


        var toolbar = [{
            text: '添加',
            iconCls: 'icon-add',
            handler: function (elem) {
                $("#showImg").css("display", "none");
                $("#form_add").form("clear");
                $("#form_add").attr("action", "/Home/Add");
                $("#win_add").window("open");
            }
        }, {
            text: '批量删除',
            iconCls: 'icon-remove',
            handler: function (elem) {
                var rows = $("#dg").datagrid("getChecked");
                if (confirm("确认删除选中条目？")) {
                    var IDs = [];
                    var i = 0;
                    while (i < rows.length) {
                        IDs.push(rows[i++].G_ID);
                    }

                    var param = {};
                    param.IDs = IDs;

                    $.ajax({
                        type: 'get',
                        data: param,
                        url: '/Home/BatDel',
                        traditional: true,
                        success: function (data) {
                            if (data > 0)
                                $.messager.alert('提示', '已删除' + data + "条数据.", 'info');
                            else
                                $.messager.alert('错误', '删除失败！', 'error');
                            $("#dg").datagrid("reload");
                        }
                    });
                }
            }
        }];

        //展示商品图片
        function sss(bbb) {
            var a = bbb.getAttribute("src");

            $("#showimg").window("open");

            $("#qqq").attr("src", a);
            $(bbb).mouseleave(function () {
                $("#showimg").window("close");
            });
        }

        function inStore(id, event) {
            var e = event || window.event;
            $("#inWin").window("open");
            $("#inForm").attr("action", "/Home/InStore/" + id);
            $("#inBtn").click(function () {
                if (confirm("确认入库？")) {
                    $("#inForm").form('submit', {
                        success: function (data) {

                            Search($("#dg").datagrid("getPager").pagination("options").pageNumber);
                            $("#win_add").window("close");
                        },
                        error: function () {
                            alert("网络故障！");
                        }
                    });
                }
                $("#inWin").window("close");
            });
        }

        function editline(obj, event) {
            var e = event || window.event;
            e.stopPropagation();

            var row = $("#dg").datagrid("getRows")[obj];

            $("#win_add").attr("title", "编辑");
            $("#showImg").attr("src", row.Img);
            $("#showImg").css("display", "block");
            $("#form_add").form("clear");
            $("#form_add").attr("action", "/Home/Edit/" + row.G_ID);
            $("#form_add").form("load", row);

            $("#win_add").window("open");


        }

        function deleteline(G_ID, event) {
            var e = event || window.event;
            e.stopPropagation();
            if (confirm("确认删除该条目？")) {
                $.ajax({
                    type: 'get',
                    url: '/Home/Delete/' + G_ID,
                    success: function (data) {
                        if (data == 0)
                            $.messager.alert('提示', '删除成功', 'info');
                        else
                            $.messager.alert('警告', '失败！', 'warning');
                        Search($("#dg").datagrid("getPager").pagination("options").pageNumber);
                    }
                });
            }
        }


        function searchinput(elem) {

            var e = event || window.event;
            e.stopPropagation();
        }
        /**
         * 提交form表单
         * param id form表单id
         */
        function submit(id) {

            $(id).form('submit', {
                success: function (data) {
                    if (data == 0) {
                        alert("成功。");
                    }
                    else {
                        alert("失败。");
                    }
                    Search($("#dg").datagrid("getPager").pagination("options").pageNumber);
                    $("#win_add").window("close");
                }
            });

        }


        function clearForm(obj) {
            $("showImg").attr("src", "");
            $(obj).form("clear");
        }

        function Search(_pageNumber) {
            var val = {};
            val.pageNumber = _pageNumber;
            val.pageSize = $("#dg").datagrid("getPager").pagination("options").pageSize;
            val.type = $("#type").val();
            val.text = $("#selecttext").val();

            $.ajax({
                type: 'get',
                url: '/Home/Search',
                async: true,
                dataType: 'json',
                data: val,
                success: function (result) {
                    $('#dg').datagrid('loadData', result);
                    $("#dg").datagrid("getPager").pagination({
                        onSelectPage: function (pageNumber, pageSize) {
                            Search(pageNumber);

                        },
                        onRefresh: function (pageNumber, pageSize) {
                            Search(pageNumber);
                        }
                    });
                }
            });
        }
    </script>

    <div id="win_add" class="easyui-window" title="" style="width:350px;height:280px;display:none;" data-options="iconCls:'icon-edit',shadow:false,collapsible:false,minimizable:false,closed:true,modal:true">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'center'" style="text-align:center;">
                <div class="space-20"></div>

                <form class="window_form" id="form_add" method="post">
                    <div>
                        <label>类型:</label>
                        <select name="Type" form="form_add" required style="width:60%;">
                            <option value="0">零食&饮料</option>
                            <option value="1">电子&数码</option>
                            <option value="2">厨卫&家居</option>
                            <option value="3">水果&干果</option>
                            <option value="4">其他</option>
                        </select>
                    </div>
                    <div>
                        <label>名称:</label><input class="easyui-textbox" singleSelect="true" name="Name" data-options="required:true,width:200" />
                    </div>
                    <div>
                        <label>详情:</label><input class="easyui-textbox" name="Detail" data-options="required:true,width:200" />
                    </div>
                    <div>
                        <label>单价:</label><input class="easyui-textbox" singleSelect="true" name="Price" data-options="required:true,width:200" />
                    </div>
                    <div>
                        <label>质量:</label><input class="easyui-textbox" singleSelect="true" name="Weight" data-options="required:true,width:200" />
                    </div>
                    <div>
                        <label>备注:</label><input class="easyui-textbox" singleSelect="true" name="Remark" data-options="required:false,width:200" />
                    </div>
                    <div align="center">
                        <img id="showImg" align="center" src="" style="width:100px;height:100px;display:none;margin:0,auto;" />
                        <input type="text" id="Img" name="Img" style="display:none " value="" />
                    </div>
                    <div>
                        <input type="button" class="btn btn-file" onclick="upload(this)" value="图片上传" />
                    </div>

                    <div class="space-10"></div>
                    <div style="text-align:center;padding:5px 0">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submit('#form_add')" style="width:80px;height:30px">提交</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm('#form_add')" style="width:80px;height:30px">清空</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#win_add').window('close')" style="width:80px;height:30px">退出</a>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

<div id="showimg" class="easyui-dialog" align="center" title="" style="width:60%;height:auto;display:none;left:0;top:20%" data-options="iconCls:'icon-add',shadow:false,collapsible:false,minimizable:false,closed:true,modal:false,zindex:900">
    <img align="center" id="qqq" style="width:100%;height:100%" />
</div>


@*图片上传*@
<div id="upload" class="easyui-window" title="上传图片" style="width:550px;height:400px;display:none;" data-options="iconCls:'icon-edit',shadow:false,collapsible:false,minimizable:false,closed:true,modal:true">
    <form>
        <div class="row">
            <input id="file1" type="file" class="file-loading">
        </div>
    </form>
</div>


<script>

    function upload(img) {
        $("#upload").window("center");
        initFileInput("file1", "/Home/Upload");
        $("#upload").dialog("open");
        $("#file1").on("fileuploaded", function (event, data, previewId, index) {
            $("#upload").dialog("close");
            var file = "/GoodsImg/" + data.response.fname;
            $("#Img").val(file);
            $("#showImg").css("display", "block");
            $("#showImg").attr("src", file);
            $("#file1").removeClass("file-loading");
        });
    }
    /////
    //初始化fileinput控件（第一次初始化）
    function initFileInput(ctrlName, uploadUrl) {
        var control = $('#' + ctrlName);
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: uploadUrl, //上传的地址
            allowedFileExtensions: ['jpg', 'png', 'gif'],//接收的文件后缀
            maxFileCount: 1,
            autoReplace: true,
            uploadAsync: true,
            validateInitialCount: true,
            showUpload: true, //是否显示上传按钮
            showCaption: true,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            showClose: true,
            showPreview: true,
            showUploadedThumbs: true,
            maxFileSize: 0,
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        });
    }
</script>

<div id="inWin" class="easyui-window" title="" style="display:none;" data-options="iconCls:'icon-edit',shadow:false,collapsible:false,minimizable:false,closed:true,modal:true">
    <form id="inForm" class="window_form" action="/Goods/InStore">
        <div align="center"style="margin:10px;padding:10px">
            <label>入库件数：</label><input name="num" type="number" min="0" id="inStore" />
            &nbsp;
            <button type="button" class="btn" align="center" id="inBtn">确认</button>
        </div>
    </form>
</div>